<template>
	<view class="user_wrap">
		<!-- 修改昵称 -->
		<view class="editName_wrap" v-if="isShow">
			<view class="editName">
				<input type="text" v-model="userInfo.nickName" />
				<text @click="editName(1)">修改</text>
			</view>
		</view>


		<!-- 个人资料主页面 -->
		<view v-else>
			<l-function-list :functionData="functionData" @chooseImg="chooseImg" @editUsername="editUsername"
				@editMobile="editMobile" @editName="editName" @chooseSex="chooseSex"></l-function-list>
			<button type="default" @click="logout">退出登录</button>
		</view>

	</view>
</template>

<script>
	import {
		mapState
	} from "vuex"
	// 组件
	import lFunctionList from "../../components/l-function-list.vue"
	// 数据	
	import userList from "../../common/mock/user-list.js"
	// api
	import {
		MyModel
	} from "../../common/apis/my.js"
	let myModel = new MyModel()

	export default {
		components: {
			lFunctionList
		},
		data() {
			return {
				functionData: userList(),
				isShow: false
			}
		},
		computed: {
			...mapState(["userInfo"])
		},
		methods: {

			// 退出登录
			logout() {
				uni.showModal({
					title: '确定退出登录吗?',
					content: '退出后不会删除任何历史记录',
					success: async (res) => {
						if (res.confirm) {
							uni.showLoading({
								mask: true
							})
							try {
								const {
									data: {
										code,
										message
									}
								} = await myModel.logout()
								if (code === 20000) {
									uni.hideLoading()
									this.$util.msg(message)
									this.logoutSuccess()
								}

							} catch (e) {
								uni.hideLoading()
								this.$util.msg('退出失败')
							}
						}
					}
				})
			},
			// 退出后清除个人信息
			logoutSuccess() {
				this.$store.commit('logout')
				setTimeout(() => {
					this.navBack()
				}, 500)
			},
			// 修改头像
			chooseImg() {
			},
			// 修改用户名
			editUsername() {
				this.$util.msg('用户名不允许修改')
			},
			// 修改手机号
			editMobile() {
				this.navTo('/pages/auth/bind-mobile?title=修改手机号&editMobile=true', {
					Login: true
				})
			},
			// 显示昵称
			editName(item) {
				if (item === 1) {
					this.userUpload()
					return
				}
				this.isShow = true
				this.userInfo.nickName = item.text

			},

			// 修改性别
			chooseSex(item) {
				uni.showActionSheet({
					itemList: ['男', '女'],
					success: (res) => {
						if (res.tapIndex === this.userInfo.sex) return
						myModel.userUpload()
					}
				})
			},
			// 发送修改用户信息请求
			async userUpload() {
				uni.showLoading()
				const {
					data: {
						code,
						message
					}
				} = await myModel.userUpload(this.userInfo)
				uni.hideLoading()
				if (code === 20000) {
					setTimeout(() => {
						uni.setStorageSync('userInfo', this.userInfo)
						console.log(this.$store.state.userInfo);
						this.$util.msg(message)
						this.isShow = false
					}, 1000)
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.user_wrap {
		height: 100%;
	}

	/deep/.function_item {
		padding: 14rpx 40rpx !important;
	}

	button {
		background-color: #fff;
		margin-top: 40rpx;

		&::after {
			border: none;
		}
	}

	.editName_wrap {
		height: 100%;
		background-color: #fff;

		.editName {
			padding: 16rpx 16rpx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;

			input {
				flex: 1;
				height: min-content;
				padding: 20rpx;
				border: 1rpx solid #eee;
			}

			text {
				width: 90rpx;
				height: 86rpx;
				text-align: right;
				line-height: 86rpx;
				color: $mxg-text-color-blue
			}
		}
	}
</style>
